<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AdminLTE | customer management</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
        <link href="../css/main.css" rel="stylesheet" type="text/css" />

    	<style type="text/css">
    		.box-header{
    			width: 20%;
    			margin: 10px 10px 0;
    		}
    		.custorm span{
    			display: inline-block;
    			border: 1px solid black;
    			padding: 2px 5px;
    			margin-top: 5px;
    		}
    		table tr th, table tr td{
    			text-align: center;
    		}
    	</style>
    </head>
    <body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
    	<#include "../header.html"/>
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <#include "../menu.html"/>

            <!-- Right side column. Contains the navbar and content of the page -->
           <aside class="right-side">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>客户管理</h1>
                </section>
                <!-- Main content -->
                <section class="content">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box">
                                <div class="box-header">
                                    <table class="table table-bordered">
                                    	<tr>
                                    		<td>全部</td>
                                    		<td>已签约</td>
                                    		<td>未签约</td>
                                    	</tr>
                                    </table>
                                </div><!-- /.box-header -->
                                <div class="box-body">
                                	<div>
                                		<span class="pull-left">
                                			<div class="input-group">
											    <input type="text" class="form-control input-md">
											    <span class="input-group-addon btn btn-primary">搜索</span>
											</div>
                                		</span>
										<span class="pull-right" style="margin-bottom: 10px;">
											<button type="button" class="btn btn-primary" id="add_customer">新增客户</button>
										</span>
                                	</div>
                                	<table class="table table-bordered" style="margin: 10px 0;">
                                		<tr>
                                            <th style="border: 0; width: 25%;">基本信息</th>
                                            <th style="border: 0; width: 14%;">分类</th>
                                            <th style="border: 0; width: 14%;">设计</th>
                                            <th style="border: 0; width: 14%;">打样</th>
                                            <th style="border: 0; width: 14%;">大货</th>
                                            <th style="border: 0;">操作</th>
                                        </tr>
                                	</table>
                                	<#list customerList as customer>
                                     <table class="table table-bordered">
                                        <tr>
                                            <td style="text-align: left;" colspan="6">客户编号：${customer.code!}</td>
                                        </tr>
                                        <tr>
                                            <td style="width: 26%; text-align: left;">
                                            	<div>
                                            		<span>
                                            		<#if customer.level??>
                                            		<#if customer.level=='V1'>
                                            		<i class="iconfont">&#xe6eb;</i>
                                            		<#elseif customer.level=='V2'>
                                            		<i class="iconfont">&#xe6eb;</i>
                                            		<#elseif customer.level=='V3'>
                                            		<i class="iconfont">&#xe6eb;</i>
                                            		</#if>
                                            			</#if>
                                            		</span>
                                            		<span><#if customer.abbreviation??>${customer.abbreviation!}(${customer.fullname!})<#else>${customer.fullname!}</#if></span>
                                            		<span><i class="iconfont">&#xe6ee;</i></span>
                                            	</div>
                                            	<#list customer.contacts as contact>
                                            	<div>
                                            		<span style="margin-right: 10px;">
                                            			<i class="iconfont">&#xe6f5;</i>
                                            			${contact.linkman!}
                                            		</span>
                                            		<span>
                                            			<i class="iconfont">&#xe6f3;</i>
                                            			${contact.contact!}
                                            		</span>
                                            	</div>
                                            	</#list>
                                            	<div class="custorm">
                                            	<#list customer.label as la>
                                            		<span>${la!}</span>
                                            	</#list>
                                            	</div>
                                            	
                                            </td>
                                            <td style="width: 14%;">${customer.category!}</td>
                                            <td style="width: 14%;">${customer.designOrderCount!}</td>
                                            <td style="width: 14%;">${customer.proofingOrderCount!}</td>
                                            <td style="width: 14%;">${customer.productionOrderCount!}</td>
                                            <td style="">
                                            	<div class="btn-group">
												  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
												    创建订单 <span class="caret"></span>
												  </button>
												  <ul class="dropdown-menu dropdown-menu-right" role="menu">
												    <li><a href="#">设计订单</a></li>
												    <li><a href="#">打样订单</a></li>
												  </ul>
												</div>
                                				<div class="">
                                					<a href="doShowCustomerEditPage?id=${customer.id}">编辑</a>
                                				</div>
                                				<div class="">
                                					<a href="doRemoveCustomer?id=${customer.id}">删除</a>
                                				</div>
                                            </td>
                                        </tr>
                                    </table>
                                    </#list>
                                </div><!-- /.box-body -->
                                <div class="box-footer clearfix">
                                    <ul class="pagination pagination-sm no-margin pull-right">
                                        ${splitPage?replace("{url}","list?")}
                                    </ul>
                                </div>
                            </div><!-- /.box -->
                        </div><!-- /.col -->
                    </div><!-- /.row -->
                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->
        <!-- jQuery 2.0.2 -->
        <script src="../js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="../js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="../js/AdminLTE/app.js" type="text/javascript"></script>
        <!-- AdminLTE for demo purposes -->
        <script src="../js/customer/customer.js" type="text/javascript"></script>        
    </body>
    <script>
    	
    </script>
</html>
